<template>
  <ul class="item-list" ref="wrapper">
    <li v-for="(item, idx) in items" :key="idx" 
    @click="changeIdx(idx)" :class="{colorBlue: idx===this.idx}"
    >{{item}}</li>
    <li ref='itemSig' class="item-signal" :style="itemSigSty"></li>
  </ul>
</template>

<script>
export default {
  props: {
    items: Array,
    idx: Number
  },
  data() {
    return {
      catWidth: 0
    }
  },
  computed: {
    itemSigSty() {
      let res = {
        transform: `translateX(${this.catWidth * this.idx}px)`,
        left: `${this.catWidth / 4 }px`,
        width: `${this.catWidth / 2}px`
      };
      return res;
    }
  },
  methods: {
    changeIdx(idx) {
      this.$emit('changeIdx', idx);
    },
  },
  mounted () {
    let style = window.getComputedStyle(this.$refs.wrapper);
    let widthDes = style.getPropertyValue('width');
    let width = parseFloat(widthDes);
    this.catWidth = width / this.items.length;
  },
}
</script>

<style scoped lang="less">
@w: var(--itemListWidth);
@h: var(--itemListHeight);

.item-list {
  position: relative;
  display: flex;
  width: @w;
  height: @h;
  overflow: hidden;

  li {
    flex-grow: 1;
    flex-basis: 0;
    text-align: center;
    line-height: @h;
    font-size: calc(@h * 0.3);

    &:hover {
      cursor: pointer;
    }

    &.item-signal {
      position: absolute;
      height: 5%;
      background-color: #3a81ff;
      bottom: 0;
      transition: .3s;
    }

    // &:last-child {
    //   float: right;
    //   position: relative;
    //   font-size: calc(@h * 0.4);

    //   .search-bar {
    //     --w: 200%;
    //     --h: var(--th);
    //     --fs: calc(var(--th) * 0.6);
    //     --ih: calc(var(--th) * 0.6);
    //     position: absolute;
    //     top: 0;
    //     right: 0;

    //     &:focus-within {
    //       --w: 350%;
    //     }
    //   }
    // }
  }
}
</style>